<template>
    <div>
      <div :id="id" :style="{width: width, height: height}"></div>
    </div>
</template>

<script>
  import echarts from 'echarts'
  import westeros from './theme/westeros'
  export default {
    name: 'lineEcharts',
    props: {
      id: {
        type: String,
        default: 'myChart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      }
    },
    data() {
      return {
        chart: null,
		// dataA: [82, 63, 50, 43, 34, 23, 11],
		// dataB: [22, 38, 19, 23, 49, 33, 11],
		// dataC: [25, 43, 50, 25, 69, 53, 64],
		// dataD: [53, 73, 93, 63, 53, 43, 13],
		// dataE: [88, 19, 59, 73, 29, 33, 82]
      }
    },
    mounted() {
      this.initChart()
    },
    methods: {
      initChart() {
        this.chart = echarts.init(document.getElementById(this.id),'westeros')

		this.axios.get(this.server + '/index/getChartMsg?token=' + this.store.getters.token).then(res => {
			// console.log(res.data)
			if(res.data != '0') {
				this.chart.setOption({
				  title: {
				    text: '数据统计'
				  },
				  tooltip: {
				    trigger: 'axis'
				  },
				  legend: {
				    data:['点歌活跃数','稿件活跃数','平台使用数','评论数','搜索引擎']
				  },
				  grid: {
				    left: '3%',
				    right: '4%',
				    bottom: '3%',
				    containLabel: true
				  },
				  toolbox: {
				    feature: {
				      saveAsImage: {}
				    }
				  },
				  xAxis: {
				    type: 'category',
				    boundaryGap: false,
				    data: ['周一','周二','周三','周四','周五','周六','周日']
				  },
				  yAxis: {
				    type: 'value'
				  },
				  series: [
				    {
				      name:'点歌活跃数',
				      type:'line',
				      stack: '总量',
				      data:res.data.dataA
				    },
				    {
				      name:'稿件活跃数',
				      type:'line',
				      stack: '总量',
				      data:res.data.dataB
				    },
				    {
				      name:'平台使用数',
				      type:'line',
				      stack: '总量',
				      data:res.data.dataC
				    },
				    {
				      name:'评论数',
				      type:'line',
				      stack: '总量',
				      data:res.data.dataD
				    },
				    {
				      name:'搜索引擎',
				      type:'line',
				      stack: '总量',
				      data:res.data.dataE
				    }
				  ]
				})
				// this.dataA = res.data.dataA
				// this.dataB = res.data.dataB
				// this.dataC = res.data.dataC
				// this.dataD = res.data.dataD
				// this.dataE = res.data.dataE
			}else {
				this.chart.setOption({
				  title: {
				    text: '数据统计'
				  },
				  tooltip: {
				    trigger: 'axis'
				  },
				  legend: {
				    data:['点歌活跃数','稿件活跃数','平台使用数','评论数','搜索引擎']
				  },
				  grid: {
				    left: '3%',
				    right: '4%',
				    bottom: '3%',
				    containLabel: true
				  },
				  toolbox: {
				    feature: {
				      saveAsImage: {}
				    }
				  },
				  xAxis: {
				    type: 'category',
				    boundaryGap: false,
				    data: ['周一','周二','周三','周四','周五','周六','周日']
				  },
				  yAxis: {
				    type: 'value'
				  },
				  series: [
				    {
				      name:'点歌活跃数',
				      type:'line',
				      stack: '总量',
				      data:[82, 63, 50, 43, 34, 23, 11]
				    },
				    {
				      name:'稿件活跃数',
				      type:'line',
				      stack: '总量',
				      data:[22, 38, 19, 23, 49, 33, 11]
				    },
				    {
				      name:'平台使用数',
				      type:'line',
				      stack: '总量',
				      data:[25, 43, 50, 25, 69, 53, 64]
				    },
				    {
				      name:'评论数',
				      type:'line',
				      stack: '总量',
				      data:[53, 73, 93, 63, 53, 43, 13]
				    },
				    {
				      name:'搜索引擎',
				      type:'line',
				      stack: '总量',
				      data:[88, 19, 59, 73, 29, 33, 82]
				    }
				  ]
				})
			}
			
		},res => {
			this.chart.setOption({
			  title: {
			    text: '数据统计'
			  },
			  tooltip: {
			    trigger: 'axis'
			  },
			  legend: {
			    data:['点歌活跃数','稿件活跃数','平台使用数','评论数','搜索引擎']
			  },
			  grid: {
			    left: '3%',
			    right: '4%',
			    bottom: '3%',
			    containLabel: true
			  },
			  toolbox: {
			    feature: {
			      saveAsImage: {}
			    }
			  },
			  xAxis: {
			    type: 'category',
			    boundaryGap: false,
			    data: ['周一','周二','周三','周四','周五','周六','周日']
			  },
			  yAxis: {
			    type: 'value'
			  },
			  series: [
			    {
			      name:'点歌活跃数',
			      type:'line',
			      stack: '总量',
			      data:[82, 63, 50, 43, 34, 23, 11]
			    },
			    {
			      name:'稿件活跃数',
			      type:'line',
			      stack: '总量',
			      data:[22, 38, 19, 23, 49, 33, 11]
			    },
			    {
			      name:'平台使用数',
			      type:'line',
			      stack: '总量',
			      data:[25, 43, 50, 25, 69, 53, 64]
			    },
			    {
			      name:'评论数',
			      type:'line',
			      stack: '总量',
			      data:[53, 73, 93, 63, 53, 43, 13]
			    },
			    {
			      name:'搜索引擎',
			      type:'line',
			      stack: '总量',
			      data:[88, 19, 59, 73, 29, 33, 82]
			    }
			  ]
			})
		})
      }
    }
  }
</script>

<style scoped>

</style>
